import Vue from "vue";
import VueRouter from "vue-router";

// 引入nprogress #一款页面加载时进度条
import NProgress from "nprogress";
import "nprogress/nprogress.css";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: "/recommend",
  },
  {
    // 推荐页面
    path: "/recommend",
    name: "recommend",
    component: () => import("@/views/Recommend/Recommend"),
    meta: { title: "推荐" },
  },
  {
    // 排行榜页面
    path: "/toplist",
    name: "toplist",
    component: () => import("@/views/Toplist/Toplist"),
    meta: { title: "排行榜" },
  },
  {
    // 歌单
    path: "/playlist",
    name: "playlist",
    component: () => import("@/views/Playlist/Playlist"),
    meta: { title: "歌单" },
  },
  {
    // 主播电台
    path: "/djradio",
    name: "djradio",
    redirect: "/djradio/recommendRadio",
    component: () => import("@/views/Djradio/Djradio"),
    meta: { title: "主播电台" },
    children: [
      {
        path: "recommendRadio",
        name: "recommendRadio",
        component: () => import("@/views/Djradio/RecommendRadio"),
      },
      {
        path: "radiolist",
        name: "radiolist",
        component: () => import("@/views/Djradio/Radiolist"),
      },
    ],
  },
  {
    // 歌手
    path: "/singer",
    name: "singer",
    component: () => import("@/views/Singer/Singer"),
    meta: { title: "歌手" },
  },
  {
    // 新碟上架
    path: "/newalbum",
    name: "newalbum",
    component: () => import("@/views/NewAlbum/NewAlbum"),
    meta: { title: "新碟上架" },
  },
  {
    // 我的音乐
    path: "/mymusic",
    name: "mymusic",
    component: () => import("@/views/MyMusic/MyMusic"),
    meta: { title: "我的音乐", pickUpNav: true },
  },
  {
    // 歌单详细
    path: "/playlistdetail",
    name: "playlistdetail",
    component: () => import("@/views/PlaylistDetail/PlaylistDetail"),
    meta: { title: "歌单内容" },
  },
  {
    // 碟详细
    path: "/albumdetail",
    name: "albumdetail",
    component: () => import("@/views/AlbumDetail/AlbumDetail"),
    meta: { title: "Album" },
  },
  {
    // 歌手页
    path: "/artist",
    name: "artist",
    component: () => import("@/views/Artist/Artist"),
    redirect: "/artist/artistpopwork",
    children: [
      {
        // 艺人介绍
        path: "artistintroduction",
        name: "artistintroduction",
        component: () =>
          import("@/views/Artist/ArtistIntroduction/ArtistIntroduction"),
        props: (route) => ({
          artist: route.params.artist,
        }),
      },
      {
        // 艺人专辑
        path: "artistallalbums",
        name: "artistallalbums",
        component: () =>
          import("@/views/Artist/ArtistAllAlbums/ArtistAllAlbums"),
      },
      {
        // 热门作品
        path: "artistpopwork",
        name: "artistpopwork",
        component: () => import("@/views/Artist/ArtistPopWork/ArtistPopWork"),
      },
    ],
  },
  {
    // 歌曲页
    path:'/songdetail',
    name:'songdetail',
    component: ()=>import("@/views/SongDetail/SongDetail")
  }
];

const router = new VueRouter({
  routes,
  scrollBehavior() {
    // 跳转路由时页面滚到顶部
    return { x: 0, y: 0 };
  },
});

// 路由跳转前钩子函数中 - 执行进度条开始加载
router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  if (to.query.title) {
    document.title = to.query.title;
  }
  NProgress.start();
  next();
});

// 路由跳转后钩子函数中 - 执行进度条加载结束
router.afterEach(() => {
  NProgress.done();
});

export default router;
